<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!--搜索框 & 按钮-->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入搜索内容" v-model="queryParams.query" clearable @click="getOrderList">
                        <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-button type="primary" @click="toAddGoods">添加</el-button>
                </el-col>
            </el-row>
            <!--商品列表 区域-->
            <el-table :data="goodsList" border style="width: 100%">
                <el-table-column type="index" label="#" width="100"> </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" > </el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)" width="100px" > </el-table-column>
                <el-table-column prop="goods_weight" label="商品重量"width="70px"> </el-table-column>
                <el-table-column prop="goods_number" label="商品数量"width="70px"> </el-table-column>
                <el-table-column prop="add_time" label="创建时间" width="140px">
                    <template slot-scope="scope">{{scope.row.add_time}}</template>
                </el-table-column>
                <el-table-column prop="date" label="操作" >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditGoods(scope.row)"></el-button>
                        <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="mini"
                                @click="removeById(scope.row.goods_id)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页区域-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pagenum"
                    :page-sizes="[5, 10, 15, 20, 30, 50]"
                    :page-size="queryParams.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </el-card>

        <el-dialog
                title="编辑商品信息"
                :visible.sync="editGoodsDialogVisible"
                border style="width: 100%" @close="editGoodsClosed">
            <el-form ref="editGoodsFormRef"
                     :model="editGoodsForm"
                     :rules="editGoodsFormRules"
                     label-width="80px">
                <el-form-item label="商品名称" prop="goods_name"><el-input v-model="editGoodsForm.goods_name"></el-input></el-form-item>
                <el-form-item label="价格" prop="goods_price"><el-input v-model.number="editGoodsForm.goods_price"></el-input></el-form-item>
                <el-form-item label="数量" prop="goods_number"><el-input v-model.number="editGoodsForm.goods_number"></el-input></el-form-item>
                <el-form-item label="重量" prop="goods_weight"><el-input v-model.number="editGoodsForm.goods_weight"></el-input></el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editGoodsDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editGoods">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Goods",
        data(){
            return {
                // 商品列表 数据
                goodsList:[],
                // 查询的参数
                queryParams:{
                    query:'',
                    pagenum : 1,
                    pagesize : 5
                },
                // 总记录 数
                total:0,
                // 编辑 对话框
                editGoodsDialogVisible:false,
                // 编辑商品
                editGoodsForm:{
                    goods_name:'',
                    goods_price:'',
                    goods_number:'',
                    goods_weight:'',
                    goods_introduce:''
                },
                // 编辑 商品 表单 校验
                editGoodsFormRules:{
                    goods_name:[
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        {
                            min: 2,
                            max: 30,
                            message: '商品名称的长度在2～30个字',
                            trigger: 'blur'
                        }
                    ],
                    goods_price:[
                        { required: true, message: '请输入商品价格', trigger: 'blur' },
                        { type: 'number', message: '商品价格必须为数字值'}
                    ],
                    goods_number:[
                        { required: true, message: '请输入商品数量', trigger: 'blur' },
                        { type: 'number', message: '商品数量必须为数字值'}
                    ],
                    goods_weight:[
                        { required: true, message: '请输入商品重量', trigger: 'blur' },
                        { type: 'number', message: '商品重量必须为数字值'}
                    ]
                },

            }
        },
        created() {
            this.getGoodsList()
        },
        methods:{
            async getGoodsList(){
                // 根据分页获取对应的商品列表
                await this.$http.get('goods',{
                    params:this.queryParams
                }).then(res=>{
                    //console.log(res)
                    if (res.data.meta.status != 200){
                        return this.$message.error('获取商品列表数据失败!')
                    }
                    this.goodsList = res.data.data.goods
                    this.total = res.data.data.total
                }).catch(err=>{
                    console.log(err);
                })
            },
            // 监听 pageSize 的改变
            handleSizeChange(newSize){
                this.queryParams.pagesize = newSize
                this.getGoodsList()
            },
            // 监听 当前页的 改变
            handleCurrentChange(newPage){
                this.queryParams.pagenum = newPage
                this.getGoodsList()
            },
            async removeById(id){
                //console.log("删除"+id)
               await this.$confirm(
                    '是否删除此商品？',
                    '提示',
                    {
                        confirmButtonText:'删除',
                        cancelButtonText:'取消',
                        type:'warning'
                    }
                ).then(res=>{
                   this.$http.delete('goods/'+id).then(res=>{
                        if (res.data.meta.status !== 200){
                            this.$message.err('删除商品失败!')
                        }else{
                            this.$message.success('删除商品成功!')
                            this.getGoodsList()
                        }
                    })

                }).catch(err=>{
                    this.$message.error('已取消删除!')
                })
            },
            showEditGoods(row){
                this.editGoodsDialogVisible = true
                this.editGoodsForm = row
            },
            editGoods(){
                /*goods_name:this.editGoodsForm.goods_name,
                    goods_price:this.editGoodsForm.goods_price,
                    goods_number:this.editGoodsForm.goods_number,
                    goods_weight:this.editGoodsForm.goods_weight,
                    cat_id:1*/
                console.log("更新："+this.editGoodsForm)
                this.$http.put('goods/'+this.editGoodsForm.goods_id,
                {params:this.editGoodsForm}).then(res=>{
                    //console.log(res)
                    if (res.data.meta !== 200){
                        this.$message.error('更新商品信息出错')
                    }
                }).catch(err=>{
                    console.log(err)
                })
                this.editGoodsDialogVisible = false
            },
            //监听 编辑窗口 关闭事件
            editGoodsClosed(){
                // 重置表单
                this.$refs.editGoodsFormRef.resetFields()
            },
            // 跳转添加 商品 页面
            toAddGoods(){
                this.$router.push('/goods/add')
            }
        }
    }
</script>

<style scoped>

</style>